<template>
<body id="box">
 <el-form :model="loginForm" ref="userFrom"  :rules="rules" class="login" label-position="left" label-width="0px" >
  <div>
 <h3 class="title" style="float:left;">
        法院系统登陆
    </h3>
     <el-form-item label-width="100px"  prop="value">      
  <el-select style="margin-left:35px"  v-model="loginForm.value" @change="click" placeholder="请选择法院">
    <el-option
      v-for="item in courts"
      :key="item.id"
      :label="item.courtName"
      :value="[item.id,item.courtName]"
      >
    </el-option>
  </el-select>
   </el-form-item>
  </div>
  <el-form-item   prop="username">
    <el-input type="text"  prefix-icon="el-icon-user"  v-model="loginForm.username" auto-complete="off" placeholder="用户名"></el-input>
  </el-form-item>
   <el-form-item  prop="password" >
    <el-input  type="password"  prefix-icon="el-icon-lock" show-password v-model="loginForm.password" auto-complete="off" placeholder="密码"></el-input>
  </el-form-item>
  <el-form-item style="width:100%">
    <el-button type="primary" style="width=100%;background:#505458;border:none" @click="onSumbit">登录</el-button>
      <el-checkbox style="float:right" label="记住我"></el-checkbox>
  </el-form-item>

</el-form>
</body>
</template>
<script>
export default {
  name: 'loginVue',
  data () {
    return {
      loginForm: {
        username: '',
        password: '',
        value:''
      },
      rules: {
       username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        value:[
           { required: true, message: '请选择法院', trigger: 'change' }
        ]
      },
      courts: [],
    }
  },
  methods: {
    click(data){
    let [id,label]=data
    console.log(id)   
    console.log(label)
    localStorage.setItem('court',label)
    localStorage.setItem('courtId',id)
  },
    loadCourt() {
      this.request.post('/user/getAllCourt').then(res =>{
        this.courts = res.data
        console.log(res)
      })
    },
    onSumbit () {
      
      this.$refs.userFrom.validate((valid) => {
        // 表单校验合法（true）
        if (valid) {
          this.request.post('/user/login', this.loginForm).then(res => {
          
            console.log(res)
            if (res.data != null && res.data !== '') {
              // 存储
              console.log(res.data)
              localStorage.setItem('user', JSON.stringify(res.data))
              console.log('打印')
              // 跳转
              this.$router.replace({ path: '/home' })
              this.$message.success(res.msg)
            } else {
              this.$message.error(res.msg)
            }
          })
        } else {
          alert('未填写完整')
        }
      })
    }
  },
  beforeMount () {
    this.loadCourt()
  }
  
}

</script>
<style>
#box{
    background-position: center;
    height: 100%;
    width: 100%;
    background-size: cover;
    position: fixed;
    background-image: url("../images/login.jpg");
}
body{
    margin: 0px;
    padding: 0px;
}
.login{
    border-radius: 15px;
    background-clip: padding-box;
    margin: 90px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cacac6;
}
.title{
  position:fixed;
}
</style>
